<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Shipping tracking</title>

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.7/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.7/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.7/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.6.7/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.6.7/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.6.7/locale/easyui-lang-zh_CN.js"></script>

    <script src="publicJS/publicJS.js" type="text/javascript"></script>

    <script src="js/shippingtrackingen.js" type="text/javascript"></script>

    <style type="text/css">

        .datagrid-cell,
        .datagrid-cell-group,
        .datagrid-header-rownumber,
        .datagrid-cell-rownumber {
            margin: 0;
            padding: 0 4px;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            height: 40px;
            line-height: 30px;
            font-weight: normal;
            font-size: 16px;
            /*font-family: SimHei;*/
        }
        .datagrid-header-row,
        .datagrid-row {
            height: 30px;
        }

        #grid .datagrid-header {
            position: absolute;
            visibility: hidden;
        }

        #grid .datagrid-body {
            overflow: hidden;
        }
    </style>

</head>
<body>


<div id="cc" class="easyui-layout" data-options="fit:true">

    <div data-options="region:'north',split:true,height:'auto'">
        <div style="width: 100%;height: 100%;float: left;">
            <div style="width: 100%;height: 100px;border:1px solid #00DDDD">
              
                <div class="d_main01_left">
                    <label class="lab05">B/L NO:</label>
                    <input class="text05" id="tdh" type="text"  >
                    <label class="lab04">CONTAINER NO:</label>
                    <input class="text04" id="xh" type="text"  >
                </div>
                <div class="d_main01_right">
                  <button class="ant-btn ant-btn-red saoma" onclick="getgriddetail()">Submit</button>
                </div>
            </div>
          
        </div>
    </div>

    <div data-options="region:'center'" style="padding:5px;background:#FFFCFB;">
        <table id="grid_detail"> </table>
    </div>
    <!-- 底部按钮 -->
    <div data-options="region:'south',split:true,height:'auto'" >
      <div style="width: 100%;height: 100%">
          <div style="width: 50%;height: 45px;float: left;">
              <div style="width: 98%;height:100%;">
                  <button class="ant-btn ant-btn-red ant-btn_south bottom_btn" onclick="downloadflie('运单')">Waybill file</button>
              </div>
          </div>
          <div style="width: 50%;height: 45px;float: left;">
              <div style="width: 98%;height:100%;">
                  <button class="ant-btn ant-btn-red ant-btn_south bottom_btn" onclick="downloadflie('报关单')">Customs Declaration</button>
              </div>
          </div>
      </div>
  </div>

</div>

<div id="win_file" class="easyui-window" title="file" 
     data-options="iconCls:'icon-save',modal:true, collapsible:false,minimizable:false,closable:true,maximizable:false,resizable:false,maximized:true,closed:true">
     <div style=" position: absolute;height: calc(100% - 85px);width: 99%;top: 30px;left: 10px;border: 0px solid #0E2D5F;">
      <table id="dg_file"></table>
      </div>
      <div style=" position: absolute;height: 45px;width: 98%;top: calc(100% - 50px);left: 3px;border: 0px solid #0E2D5F;">
          <button class="ant-btn ant-btn-red ant-btn_south bottom_btn_flie" onclick="$('#win_file').window('close');">return</button>
      </div>
</div>

</body>

<style type="text/css">
    .keyboard_top {
        position: absolute; /*绝对定位*/
        height: 50px;
        width: 95%;
        top: 40px;
        left: 10px;
        /*border: 1px solid #0E2D5F;*/
    }

    .keyboard_center {
        position: absolute; /*绝对定位*/
        height: 340px;
        width: 95%;
        top: 110px;
        left: 10px;
        /*border: 1px solid #FF0000;*/
    }
    .keyboard_bot {
        position: absolute; /*绝对定位*/
        height: 80px;
        width: 95%;
        top: 460px;
        left: 10px;
        /*border: 1px solid #FF0000;*/
    }


    .d_main01_left {
        position: absolute; /*绝对定位*/
        height: 100px;
        /* width: 50%; */
        width: calc(100% - 90px);;
        left: 1px;
        margin: auto; /* 左右 margin 设置为 auto */
			  text-align: center; /* 设置文本对齐方式为 center */
        /* border: 1px solid red; */
    }
    .d_main01_right {
        position: absolute; /*绝对定位*/
        /* height: calc(100% - 90px); */
        height:90px;
        width: 80px;
        right: 10px;
        top: 5px;

        /* border: 1px solid #0E2D5F; */
    }

    .lab01,.lab03,.lab05,.lab07,.lab02,.lab04,.lab06,.lab08,.lab20 {
        float: left;
        text-align:center;
        height: 45%;
        width: 150px;
        font-size: 16px;
        line-height:50px;
        border-inline-width:50px;
        /*border: 1px solid #0c7cd5;*/
        overflow:hidden;   /*超出宽度不显示文字*/
    }
    .text01,.text03,.text05,.text07,.text02,.text04,.text06,.text08,.text20 {
        outline:none;
        float: left;
        height: 45%;
        /* width: 59%; */
        width: calc(100% - 155px);;
        line-height:50px;
        font-size: 18px;
        text-align:left;
        /*padding-top:15px;*/
        /*padding-bottom:0px;*/
        border: 1px;
        color: #005de6;
        border-bottom:1px solid #000000;
    }

    .lab01{float: left;text-align:right;height: 100%;width: 20%}
    /*.lab02{float: left;text-align:right;height: 100%;width: 20%;border: 1px solid #0c7cd5;}*/
    .text01{outline:none;float: left;height: 100%;width: 50%;font-size: 26px;}
    .text03{outline:none;float: left;height: 100%;width: 30%;font-size: 26px;}

    .lab20{float: left;text-align:center;height: 100%;width: 30%;font-size: 26px;}
    .text20{outline:none;float: left;height: 100%;width: 70%;font-size: 36px;/*padding-top:7px;*/}

    .lab09,.lab10 {
        float: left;
        text-align:right;
        height: 80%;
        width: 15%;
        font-size: 16px;
        line-height:50px;
        padding-top:10px;
        padding-bottom:1px;
        border-inline-width:50px;
        /*border: 1px solid #0c7cd5;*/
        overflow:hidden;   /*超出宽度不显示文字*/
    }
    .text09,.text10 {
        outline:none;
        float: left;
        height: 80%;
        width: 35%;
        line-height:50px;
        font-size: 21px;
        text-align:center;
        padding-top:10px;
        padding-bottom:1px;
        border: 1px;
        color: #005de6;
        /*border: 1px solid #0c7cd5;*/
        border-bottom:1px solid #000000;
    }

    .lab11 {float: left;text-align:center;height: 80%;width: 100%;font-size: 24px;padding-top:5px;overflow:hidden;   /*超出宽度不显示文字*/}
    /*/******************************************************************************************************/

    .ant-btn {
        line-height: 1.499;
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        background-image: none;
        /*border: 1px solid transparent;*/
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
        box-shadow: 0 2px 0 rgba(0,0,0,0.015);
        cursor: pointer;
        -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        height: 70px;
        width: 30%;
        padding: 0 15px;
        font-size: 18px;
        border-radius: 20px;
        color: rgba(0,0,0,0.65);
        background-color: #fff;
        border-color: #d9d9d9;
        margin-left: 1%;

    }

    .ant-btn-red {
        outline:none;
        color: #000000;
        /*background-color: #FFDEAD;*/
        /*border-color: #FFDEAD;*/
        text-shadow: 0 -1px 0 #73bbeb0b;
        -webkit-box-shadow: 0 2px 0 #73bbeb0b;
        box-shadow: 0 2px 0 #73bbeb0b;
    }

    .ant-btn-red {
        border-radius: 10px;
        margin-left: 1%;
        font-size: 18px;
    }


    /*底部按钮*/
    .bottom_btn{background-color: #d9f1f1;border-color: #d9f1f1;height: 100%;width: 100%;}
    .bottom_btn_flie{background-color: #d9f1f1;border-color: #d9f1f1;height: 100%;width: 98%;}
    .saoma{background-color: #b2ecec;border-color: #b2ecec; height: 100%;width: 100%;text-align: center;}
    
    .saoma{border:1px; padding-bottom:0px; padding-left:3px; cursor:pointer}
</style>

</html>